<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/tag_lib.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>스프링 테스트 예제</title>
		<script type="text/javascript">
	        
	        // jQuery 
	        $(document).ready(function () {
	        	// initialize();
	        	
			    $("#addFile").click(function () {
			      $("#attached").append("<input type='file' name='' id='' />");
			    });

			    $("#addMap").click(function () {
				    alert("addMap");
				    // $("#attached").append();
			    });

			    $("#getSize").click(function () {
				    $.getJSON('http://api.flickr.com/services/rest/?', 
					    {'api_key' : '03f3fab85e2cd28de1fb969b320768bc',
					     'method' : 'flickr.photos.getSizes',
	                     'photo_id' : '4175667707',
	                     'format' : 'json'} ,
	                    function (data) { alert(1); })});
			});

	        function getPhotoList() {
		        var flickr =  document.getElementById("flickr");
		        var action = flickr.action + "api_key=03f3fab85e2cd28de1fb969b320768bc&method=" + flickr.methods.value + "&photo_id=4175667707";
		        alert(action);
		        flickr.action = action;
		        $("#list").load(action);
	        }

	        function getLoad() {
		        var action = "http://api.flickr.com/services/rest/?";
		        var action = "http://api.flickr.com/services/rest/?format=json&api_key=03f3fab85e2cd28de1fb969b320768bc&method=flickr.photos.getSizes&photo_id=4175667707&jsoncallback=?";
		        $.getJSON(action, 
			        function(data) {
		                $.each(data.sizes.size, function(index, each2) {
		                	$("#list").append(each2['label'] + '<img src=\"' + each2['source'] + '\" />');
		                });
			            //for(i = 0; i < data.sizes.size.length; i++ ) {
				        //    var each = data.sizes.size[i];
				        //    $("#list").append(each.label + '<img src=\"' + each.source + '\" />');
			            //} 

			        });
		        //return false;
	        }

	        function upload() {
		        var authUrl = " http://flickr.com/services/auth/?api_key=03f3fab85e2cd28de1fb969b320768bc&perms=read&api_sig=2f3870be274f6c49b3e31a0c6728957f"; 
		        var auth = 
	            alert(1);
	        }

	        function callSigninUser() {
		        var queryString = '1';
	        	$.post('./test2.jude', 
	    	        	queryString ,                
	    	        	function(data){
	        		        alert(data);
	        		        //callAuth(data);
    	        	    }
        	    );
	        }

	        function callFrob() {
                $.post('./getFrob.jude',
                        function(data) {
                            alert(data);
                            window.open(data, "auth");
                        }
                );
            }

	        function testAuth() {
                $.post('./testAuth.jude',
                        function(data) {
                            alert(data);
                            //window.open(data, "auth");
                        }
                );
            }

            function callToken() { 
            	$.post('./getToken.jude',
                    	function(data) {
                	        alert(data);
            	        }
            	);
            }

            function getMD5() {
                $.post('./getMD5.jude?value=' + $("#md5").val(),
                        function(data) {
                            alert(data);
                        }
                );
            }

            function getAuth() {
            	alert($("#frob").val() == "");
                var api_sig, value, dest;
                if($("#frob").val() == "") {
	                value = $("#SECRET_KEY").val() + "api_key" + $("#API_KEY").val() + "perms" + $("#perms").val();

	                $.post('./getMD5.jude?value=' + value,
	                        function(data) {
	                            api_sig = data;
				                 
				                var dest = "http://flickr.com/services/auth/?api_key=" + $("#API_KEY").val() + 
				                    "&perms=" + $("#perms").val() + "&api_sig=" + api_sig;
			
			                    alert("dest > " + dest);

			                    document.location = dest;
	                        }
	                );
                } else {
                    alert("we've got frob and going to get token");
                    value = $("#SECRET_KEY").val() + "api_key" + $("#API_KEY").val() 
                            + "frob" + $("#frob").val()
                            + "methodflickr.auth.getToken";

                    $.ajax({
                        url : './getMD5.jude?value=' + value,
                        async : false,
                        success : function(data) {
                                alert(1);
                                api_sig = data;
                                 
                                dest = "http://flickr.com/services/rest/?api_key=" + $("#API_KEY").val() 
                                    + "&method=flickr.auth.getToken" 
                                    + "&frob=" + $("#frob").val()
                                    + "&api_sig=" + api_sig;
                                $("#dest").val(dest);
            
                        }
                    });

                    //$.ajax({url:dest, success: function(data) {alert(data);}});
                }
            }

            function getToken(){
                $.get("./getToken.jude",
                        function(data) {
                            alert(data);
                        }
                );
            }

            function uploadForm() {
                $.get("./geAuthDestination.jude",
                        function(data) {
                            document.location = data;
                        }
                );
            }
		</script>
	</head>
	<body onunload="GUnload()">
	    Test<br/>
	    <form id="flickr" action="http://api.flickr.com/services/rest/?" onSubmit="return false;">
	        <input type="hidden" id="methods" value="flickr.photos.getSizes" />
	        <input type="hidden" id="format" value="" />
	    </form>
        <hr />
        <a href="javascript:getPhotoList();">Get Photo List</a>
        <div id="list"></div>
        <a href="http://api.flickr.com/services/rest/?api_key=03f3fab85e2cd28de1fb969b320768bc&method=flickr.photos.getSizes&photo_id=4175667707">링크로 연결</a><br />
        <a href="javascript:getLoad();">자바스크립트 링크로 연결</a>
        <span id="getSize">이미지 사이즈 별로 가져오기</span>
        <hr />
        <a href="javascript:uploadForm();">업로드 폼을 열어볼까요?</a>
        <hr />
        <form id="auth">
            <hr />
            . Auth 
            <hr />
            API_KEY : <input id="API_KEY" type="text" value="${API_KEY }"/><br />
            SECRET : <input id="SECRET_KEY" type="text" value="${SECRET_KEY }"/><br />
            perms : <input id="perms" type="text" value="delete"/><br />
            frob : <input id="frob" type="text" value="${frob}"/><br />
            dest : : <input id="dest" type="text" value=""/>
            <input type="button" value="전송" onClick="getAuth()" />
        </form>
        <hr />
        . Getting token
        <hr />
        token : <input id="token" type="text" value=""/>
        <a href="javascript:getToken();">토큰가져오기</a>
        
        <hr />
        .test Auth
        <hr />
        <a href="javascript:callFrob();" >자바스크립트 testAuth() </a><br />
        <a href="javascript:getMD5();" ><input type="text" id="md5" />자바스크립트 getMD5() </a>
	</body>
</html>